<template lang="pug">
  .showAnswer
    .modal-dialog-lg.modal-answer.bs-example-modal-lg(role='document', v-show="answerDis")
      .modal-content
        .modal-header
          .modal-title 作答分布
          button.close(type='button', data-dismiss='modal', aria-label='Close')
            span(aria-hidden='true', @click="close") ×
      .modal-body
        .list.correct
          .modal-title 正确的人
          .list
            span.item(v-for="person in people")
              span.star(v-if="person.flag")
              span.name {{person.name}}
        .list.error
          .modal-title 错误的人
          .list
            span.item(v-for="person in people")
              span.star(v-if="person.flag")
              span.name {{person.name}}
        .list.pic
          .modal-title 答案截图
          .list-pic
        .list.btns
          a 4人正确
          a.highLight 34人错误  



</template>
<style lang="scss">
input,button,select,textarea{outline:none;}
.showAnswer {
  .modal-answer {
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    width: 960px;
    border-radius: 10px;
    .modal-content {
      border-radius: 0;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      .modal-header {
        padding: 0;
        .modal-title {
          font-size: 14px;
          margin: 0 auto;
          height: 48px;
          line-height: 48px;
        }
        .close {
          cursor: pointer;
          color: #157EF2;
          font-weight: 300;
          position: absolute;
          right: 10px;
          top: 12px;    
        }
      }
    }
    .modal-body {
      .list {
        .modal-title {
          font-size: 14px;
          text-align: center;
          margin-bottom: 10px;
        }
        .list {
          .item {
            margin-bottom: 20px;
            display: inline-block;
            cursor: pointer;
            .star {
              width: 18px;
              height: 18px;
              display: inline-block;
              border: 1px solid #157EF2;
              border-radius: 4px;
              vertical-align: middle;
              margin-right: 4px;
              background-color: #157EF2;
            }
            .name {
              display: inline-block;
              margin-right: 56px;
              color: #818385;
              font-size: 12px;
            }
          }
        }
      }
      .error {
        margin-top: 20px;
      }
      .pic {
        .list-pic {
          width: 300px;
          height: 100px;
          border: 1px solid gray;
          margin: 0 auto;
        }
      }
      .btns {
        text-align: center;
        margin-top: 20px;

        a {
          display: inline-block;
          height: 24px;
          width: 80px;
          margin-left: 10px;
          line-height: 24px;
          border: 1px solid #157EF2;
          border-radius: 6px;
          cursor: pointer;
        }
        .highLight {
          background: #157EF2;
          border: 1px solid #157EF2;
          color: #fff;       
        }
      }
    }

  }
}


</style>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      people: [{
        name: '程子昂',
        id: 1,
        flag: 1
      }, {
        name: '程子昂',
        id: 1,
        flag: 1
      }, {
        name: '程子昂',
        id: 1
      }, {
        name: '程子昂',
        id: 1
      }, {
        name: '程子昂',
        id: 1
      }, {
        name: '程子昂',
        id: 1
      }, {
        name: '程子昂',
        id: 1
      }, {
        name: '程子昂',
        id: 1
      }, {
        name: '程子昂',
        id: 1
      }, {
        name: '程子昂',
        id: 1
      }]
    }
  },
  computed: mapState({
    answerDis: state => state.modal.answerDis
  }),
  methods: {
    close () {
      this.$store.commit('showAnswerDis', false)
    }
  }
}
</script>